const glob = require('glob')
const { merge } = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
// const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css的tree shaking
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const common = require('./webpack.common')
const paths = require('./paths')

module.exports = merge(common, {
    // 模式
    mode: 'production',
    plugins: [
        // 打包体积分析
        new BundleAnalyzerPlugin(),
        // 提取 CSS
        new MiniCssExtractPlugin({
            filename: '[hash].[name].css',
        }),
        // CSS Tree Shaking
        new PurgeCSSPlugin({
            paths: glob.sync(`${paths.appSrc}/**/*`, { nodir: true }),
        }),
    ],
    optimization: {
        // concatenateModules: false,
        runtimeChunk: true,
        moduleIds: 'deterministic',
        minimizer: [
            // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
            // `...`,
            // new CssMinimizerPlugin({
            //   parallel: 4,
            // }),
            new TerserPlugin({
                parallel: 4,
                terserOptions: {
                    parse: {
                        ecma: 8,
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        comparisons: false,
                        inline: 2,
                    },
                    mangle: {
                        safari10: true,
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        ascii_only: true,
                    },
                },
            }),
        ],
        splitChunks: {
            // include all types of chunks
            chunks: 'all',
            // 重复打包问题
            cacheGroups: {
                vendors: {
                    // node_modules里的代码
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'all',
                    // name: 'vendors', 一定不要定义固定的name
                    priority: 10, // 优先级
                    enforce: true,
                },
            },
        },
    },
});